<template>
	<view>
		<view class="item">
			<view class="container" v-for="(person,index) in members" :key="person.id" >
				<view class="avatar-container" @tap="toPersonInfo(person.id)">
					<image class="avatar"  :src="person.avatar"></image>
				</view>
				<view class="content" @tap="toPersonInfo(person.id)">
					<text class="name">{{person.nickname}}<text v-show="owner_id==person.id">(群主)</text></text>
					<text class="preview">{{'D id: '+person.loginId}}</text>
				</view>
				<button class="btn" @tap="kickout(person.id)" v-show="owner_id!=person.id&&owner_id==user.id">踢出</button> <!--  -->
			</view>
		</view>
	</view>
</template>

<script>
	import WebSocket from '@/common/websocket.js';
	import $store from '@/store/index.js';
	import { getMember } from 'api/user';
	import {mapGetters} from 'vuex';
	export default {
		data() {
			return {
				members:[],
				owner_id:-1,
				index:-1,
				group_id:-1,
				group:{}
			}
		},
		onLoad(options){
			this.owner_id = options.owner_id;
			this.index = options.index;
			this.group_id = options.id;
			this.getMembersInfo(options.id);
			this.group = this.groups[this.index];
		},
		computed:{
			...mapGetters(['user','groups']),
		},
		methods: {
			kickout(id){
				if(this.group.ownerId!=this.user.id){
					uni.showToast({
						title:'只有群主允许此操作！',
						icon:'error'
					})
					return;
				}
				let that = this;
				uni.showModal({
					title:'提示',
					content:'确认踢出该成员',
					confirmText:'确定',
					confirmColor:'#D94B4D',
					cancelText:'取消',
					success: (res) => {
						if(res.confirm){
							//构造消息
							let message={
								type:'kick-person',
								from:that.$store.getters.user.id,
								to:id,
								group:that.groups[that.index]
							}
							WebSocket.sendMessage(message);
							setTimeout(()=>{
								that.getMembersInfo(that.group_id);
							},300);
						}
					}
				})
			},
			async getMembersInfo(id){
				uni.showLoading({
					title: '正在拉取成员信息...'
				})
				const { content: res } = await getMember({
				  id:id
				});
				if(res=='not found'){
					uni.showToast({
						title:'获取信息失败！',
						icon:'error',
						duration:500
					})
					setTimeout(function() {
						uni.navigateBack({
							animationType:'slide-out-left'
						})
					}, 500);
				}else{
					this.members = res;
				}
			},
			toPersonInfo(id){
				uni.navigateTo({
					url:'../../other/search/info?id='+id+'&from=group',
					animationType:'slide-in-right'
				})
			}
		}
	}
</script>

<style scoped>
	.preview{
		margin-bottom: 0;
		font-size: smaller;
	}
	.btn{
		background-color: #ff0000;
		color: azure;
		width: 120rpx;
		height: 80%;
		font-size: smaller;
		margin-top: auto;
		margin-bottom: auto;
		margin-right: 50rpx;
	}
	.arrow{
		margin-top: auto;
		margin-bottom: auto;
		color: #8F8F94;
		margin-right: 5rpx;
		margin-left: 20rpx;
		font-weight: 600;
	}
	.divider{
		margin-top: 10rpx;
		padding-left: 20rpx;
		background-color: #c5c3c4;
		border-radius: 10rpx;
	}
	.divider-text{
		font-size: smaller;
	}
	.item{
		border-radius: 15rpx;
		/* background-color: rgb(200,199,204); */
	}
	.item :hover{
		border-radius: 15rpx;
		background-color: rgb(200,199,204); 
	}
	.container{
		border-radius: 20rpx;
		margin-left: 20rpx;
		margin-right: 40rpx;
		border-radius: 30rpx;
		width: 100%;
		display: flex;
		margin-top: 10rpx;
		background-color: #e1e1e1;
	}
	
	.avatar-container{
		position: relative;
		margin: 10rpx;
	}
	.avatar{
		width: 110rpx;
		height: 110rpx;
		border-radius: 20rpx;
	}
	.content{
		display: flex;
		align-items: auto;
		flex-direction: column;
		justify-content: center;
		padding-left: 10rpx;
	}
	.name{
		text-align: left;
		margin-top: 0;
		font-weight: 1000;
		font-size: large;
	}
</style>
